<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拼夕夕</title>
    <!-- 轮播 -->
    <link rel="stylesheet" href="./css/swiper-3.4.2.min.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- header  -->
    <header>
        <div class="box">
            <div class="box-1">
                <ul>
                    <li class="lis">推荐</li>
                    <li>推荐</li>
                    <li>推荐</li>
                    <li>推荐</li>
                    <li>推荐</li>
                    <li>推荐</li>
                    <li>推荐</li>
                    <li>推荐</li>
                    <li>推荐</li>
                    <li>推荐</li>
                </ul>
            </div>
            <div class="box-2">
                <p class="iconfont">&#xe633;</p>
            </div>
        </div>
        <div class="box-3">
            <div class="b1">
                <p class="iconfont">&#xe60c;</p>
                <input type="text" name="" id="" placeholder="北京事情的爱情">
            </div>
            <div class="b2">
                <p>限时免费</p>
                <p>相声评审</p>
            </div>
        </div>
    </header>
    <!-- main -->
    <main>
        <section class="banner">
            <section class="top">下拉刷新</section>
            <div class="chrw">
                <div class="swiper-container" id="box">
                    <div class="swiper-wrapper">

                    </div>
                </div>
            </div>
            <div class="chrbox2">
                <ul>
                    <li>
                        <img src="./images/icon1.png" alt="">
                        <p>会员</p>
                    </li>
                    <li>
                        <img src="./images/icon1.png" alt="">
                        <p>会员</p>
                    </li>
                    <li>
                        <img src="./images/icon1.png" alt="">
                        <p>会员</p>
                    </li>
                    <li>
                        <img src="./images/icon1.png" alt="">
                        <p>会员</p>
                    </li>
                    <li>
                        <img src="./images/icon1.png" alt="">
                        <p>会员</p>
                    </li>
                </ul>
            </div>
            <div class="chrbox3">
                <img src="./images/效果图_02.jpg" alt="">
            </div>
            <div class="chrbox4">
                

               

            </div>
            <div class="chrbox5">
                <img src="./images/定位_03.jpg" alt="">
            </div>
            <section class="bon">上拉刷新</section>

        </section>
    </main>
    <!-- footer -->
    <footer>
        <ul>
            <li class="lis">
                <p class="iconfont">&#xe633;</p>
                <span>首页</span>
            </li>
            <li>
                <p class="iconfont">&#xe633;</p>
                <span>首页</span>
            </li>
            <li>
                <p class="iconfont">&#xe633;</p>
                <span>首页</span>
            </li>
            <li>
                <p class="iconfont">&#xe633;</p>
                <span>首页</span>
            </li>
            <li>
                <p class="iconfont">&#xe633;</p>
                <span>首页</span>
            </li>
        </ul>
    </footer>


    <!-- 轮播 -->
    <script src="js/swiper-3.4.2.min.js"></script>
    <!-- 滚动 -->
    <script src="./js/iscroll-probe.js"></script>
    <!-- 动态设置 -->
    <script src="./js/rem.js"></script>
    <!-- 移动端zepto -->
    <script src="./js/jquery.min.js"></script>
    <!-- <script src="./js/zepto-1.1.6.min.js"></script> -->
    <script src="./js/index.js"></script>
    <script>
        new IScroll('.box-1', { scrollX: true, scrollY: false })
        $("footer>ul>li").click(function(){
            $(this).addClass('lis').siblings().removeClass('lis')
        })
        var main = new IScroll("main", {
            probeType: 2
        })

        $.ajax({
            url: './js/data.json',
            success: res => {
                var num = res.lb
                var str = ''
                num.forEach(element => {
                    str += `  <div class="swiper-slide">
                            <img src="${element.img}" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="${element.img}" alt="">
                        </div>`
                    $('#box>div').append(str)
                    main.refresh()
                })
                new Swiper('#box', {
                    autoplay: 2000,
                    loop: true,

                    onSlideChangeEnd: function (ev) {
                        if (index > 4) {
                            index = 1
                        }

                        var index = ev.activeIndex;
                        var arr = ["#aca394", '#76c6ff', '#ffc742',"#5acda4","#ff8570" ];
                        $("header").css("background", arr[index - 1]);
                        $(".chrw").css("background", arr[index - 1]);

                    }
                })
            }
        })

        $.ajax({
            url: './js/data.json',
            success: res => {
                var num = res.list
                var str = ''
                sum = num.length
                num.forEach((element, index) => {

                    if (index > 1) {
                        return false
                    }

                    str += `<div class="chrbo">
                    <div class="chrbo1">
                        <div class="list-t">
                            <h3>${element.p}</h3>
                        </div>
                        <div class="list-b">
                            <div class="list-l">
                                <img src="${element.img}" alt="">
                            </div>
                            <div class="list-r">
                                <h3>${element.span}<br>${element.b1}</h3>
                                <p>
                                    <img src="${element.img1}" alt="">
                                    <span>播音夏冬</span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="chrbo1">
                        <div class="list-t">
                            <h3>${element.p}</h3>
                        </div>
                        <div class="list-b">
                            <div class="list-l">
                                <img src="${element.img}" alt="">
                            </div>
                            <div class="list-r">
                                <h3>${element.span}<br>${element.b1}</h3>
                                <p>
                                    <img src="${element.img1}" alt="">
                                    <span>播音夏冬</span>
                                </p>
                            </div>
                        </div>
                    </div>`
                });
                $('.chrbox4').append(str)

            }
        })





        var flag = true;
        var time = null;
        main.on('scroll', function () {
            var top = $('.top').height()
            if (this.y >= top && flag) {
                flag = false
                $('.top').html('松开加载').addClass('a')
                main.minScrollY = top
            }

           
            if (this.startY > this.y) {
                $(".chrbox5>img").stop().fadeOut()

            } else {
                $(".chrbox5>img").stop().fadeIn()

            }


            var bon = this.scrollerHeight - this.wrapperHeight
            var lis = $('.chrbox4>.chrbo').length;
            if (this.y <= (this.maxScrollY - top) && flag && lis < sum) {
                flag = false
                $('.bon').html('松开加载').addClass('b')
                main.maxScrollY = -(bon + top)
            }
        })
        main.on('scrollEnd', function () {
            if ($('.top').hasClass('a')) {
                $('.top').html('正在加载中')
                clearTimeout(time)
                time = setTimeout(function () {
                    $('.top').html('下拉刷新').removeClass('a')
                    main.refresh()
                    flag = true;
                }, 3000)

            }

            if ($('.bon').hasClass('b')) {
                $('.bon').html('正在加载中')

                $.ajax({
                    url: './js/data.json',
                    success: res => {
                        var box = res.list
                        var index = $('.chrbox4>.chrbo').length;
                        sum = box.length
                        console.log(sum);
                        var str = `<div class="chrbo">
                            <div class="chrbo1">
                        <div class="list-t">
                            <h3>${box[index].p}</h3>
                        </div>
                        <div class="list-b">
                            <div class="list-l">
                                <img src="${box[index].img}" alt="">
                            </div>
                            <div class="list-r">
                                <h3>${box[index].span}<br>${box[index].b1}</h3>
                                <p>
                                    <img src="${box[index].img1}" alt="">
                                    <span>播音夏冬</span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="chrbo1">
                        <div class="list-t">
                            <h3>${box[index].p}</h3>
                        </div>
                        <div class="list-b">
                            <div class="list-l">
                                <img src="${box[index].img}" alt="">
                            </div>
                            <div class="list-r">
                                <h3>${box[index].span}<br>${box[index].b1}</h3>
                                <p>
                                    <img src="${box[index].img1}" alt="">
                                    <span>播音夏冬</span>
                                </p>
                            </div>
                        </div>
                    </div>`
                        $('.chrbox4').append(str)
                        main.refresh()
                        if ($('.chrbox4>.chrbo').length == sum) {
                            $('.bon').html('到底了').removeClass('b')

                        } else {
                            $('.bon').html('上拉刷新').removeClass('b')
                        }
                        flag = true;
                    }
                })
            }
        })

    </script>
</body>

</html>